﻿<div id="search">
    <h2>Search
    </h2>
    <div>
        <h3>Source &amp; Destination:
        </h3>
        <div>
            <select data-bind="options: destinations(), value: source, optionsCaption: 'Choose...'">
                <option data-bind="text: $data, attr: { value: $data }"></option>
            </select>
            <span>To</span>
            <select data-bind="options: destinations(), value: destination, optionsCaption: 'Choose...'">
                <option data-bind="text: $data, attr: { value: $data }"></option>
            </select>
        </div>
        <h3>Departure from:
        </h3>
        <div>
            <input data-bind="value: departure" type="date" />
        </div>
        <h3>Maximum cost:
        </h3>
        <div>
            <input data-bind="value: maxCost" type="tel" />
        </div>
    </div>
    <input data-bind="click: search" type="button" class="actionButton" value="Search" />
    <input data-bind="click: history" type="button" class="actionButton" value="History" />
    <div>
        <span data-bind="visible: failed()">Search returned 0 results.</span>
    </div>
</div>
